<template>
  <div id="department-management">
    <div class="toolbar">
      <a-button type="primary" @click="openCreateDepartmentModal">{{t('operations.createDepartment')}}</a-button>
    </div>
    <a-table :columns="columns"
     :row-key="record => record.id"
     :data-source="data"
     :loading="loading">

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'state'">
          <span>
            <a-tag :color="record.state=='OK' ? 'green' : 'red'">
              {{ t(`enums.departmentState.${record.state}`) }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'note'">
          <span>
          {{record.note ? record.note : "什么也没有..."}}
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span v-if="getLocalStaff().account.role.indexOf('ROLE_SUPERADMIN') >= 0 || (getLocalStaff().account.role.indexOf('ROLE_DEPTADMIN') >= 0 && getLocalStaff().department.id == record.id)">
            <a @click="toggleDepartmentState(record)">{{record.state == 'OK' ? t('operations.closeDepartment') : t('operations.openDepartment')}}</a>
          </span>
        </template>

      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import useStaff from '@/composable/staff';
import useDepartmentTable from '@/composable/department-table';

const { getLocalStaff } = useStaff();
const { t } = useI18n();

const { columns, data, loading, toggleDepartmentState, openCreateDepartmentModal } = useDepartmentTable(t);

</script>

<style scoped>
#department-management {
  padding: 40px;
}
</style>